<template>
  <div class="batch-set-teacher" v-loading="loading">
    <header class="header">
      <span> {{ title }}</span>
      <i class="el-icon-close" @click="cancel"></i>
    </header>
    <main class="main">
      <div class="main-header">
        <div class="tip">
          <div>
            <p class="desc-text">
              操作说明：在对应班级课程下录入教师姓名即可，多个教师以逗号分隔，与系统中的教师姓名保持一致，支持快捷键
              Ctrl+C（复制）Ctrl+V（粘贴）
            </p>
          </div>
          <div class="color-tip">
            <span class="red-block"></span>：该老师不存在
            <span class="yellow-block"></span>：单元格有重复老师
          </div>
        </div>
        <div class="btn-group">
          <span class="btn export-btn" @click="toExport">模板导出</span>
          <button class="btn confirm-btn" @click="confirm">提交</button>
          <button class="btn clear-btn" @click="clearAll">清空</button>
        </div>
      </div>
      <div class="table-wrapper">
        <EditableTable
          v-if="showTable"
          :tableDataList="tableDataList"
          :allUserList="allUserList"
          :sheetName="sheetName"
          :firstColumnOnlyOneUser="firstColumnOnlyOneUser"
          :noFirstColumn="noFirstColumn"
          @uploadFile="toUploadFile"
        />
      </div>
    </main>

    <EditHelper />
  </div>
</template>

<script>
import EditableTable from './EditableTable.vue';
import EditHelper from './EditHelper.vue';
import eventBus from '@/utils/eventBus';

export default {
  name: 'BatchSetTeacher',
  props: {
    title: { type: String, required: true },
    templatePath: { type: String, required: true },
    schoolId: { type: Number, default: false },
    tableDataList: { type: Array, required: true },
    allUserList: { type: Array, required: true },
    sheetName: { type: String, required: true },
    firstColumnOnlyOneUser: { type: Boolean, default: false },
    noFirstColumn: { type: Boolean, default: false },
  },
  components: {
    EditableTable,
    EditHelper,
  },
  data() {
    return {
      loading: false,
      showTable: true,
    };
  },
  methods: {
    cancel() {
      this.$emit('cancel');
    },
    confirm() {
      eventBus.$emit('confirm');
    },
    toExport() {
      eventBus.$emit('export-excel');
    },
    clearAll() {
      this.loading = true;
      this.showTable = false;
      if (this.noFirstColumn) {
        this.tableDataList.forEach((e) => {
          e.user_list = [];
        });
      } else {
        this.tableDataList.forEach((e) => {
          e.sub_list.forEach((item) => {
            item.user_list = [];
          });
        });
      }
      setTimeout(() => {
        this.loading = false;
        this.showTable = true;
      }, 500);
    },
    async toUploadFile(fileBlob) {
      this.loading = true;
      const formData = new FormData();
      formData.append('excel', fileBlob, 'data.xlsx');
      formData.append('F_school_id', this.schoolId);

      const { F_responseNo, F_responseMsg } = await this.$api.importEditTable(
        formData
      );
      this.loading = false;
      if (F_responseNo !== 10000) {
        this.$toast('批量编辑失败: ' + F_responseMsg, true);
      } else {
        this.$toast('在线批量编辑成功');
        this.$emit('update');
      }
    },
  },
};
</script>

<style lang="less" scoped>
.batch-set-teacher {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .header {
    height: 50px;
    padding: 0 20px;
    background-color: #efefef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px 10px 0 0;
    i {
      cursor: pointer;
    }
  }

  .main {
    padding: 0 20px 20px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    .main-header {
      // height: 70px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 1;
      .tip {
        text-align: left;
        .desc-text {
          display: inline-block;
          margin: 10px 0;
          padding: 8px 10px;
          margin-right: 20px;
          color: #ed8f38;
          background-color: #fff9f4;
          border-radius: 4px;
        }
        .color-tip {
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          .red-block {
            display: inline-block;
            width: 50px;
            height: 20px;
            background-color: #f85d5d;
          }
          .yellow-block {
            display: inline-block;
            margin-left: 40px;
            width: 50px;
            height: 20px;
            background-color: #fcfc67;
          }
        }
      }
      .btn-group {
        .btn {
          display: inline-block;
          color: #009cff;
          cursor: pointer;
          margin-right: 20px;
          &:last-child {
            margin: 0;
          }
        }
        button {
          width: 70px;
          height: 36px;
          border: none;
        }
        .confirm-btn {
          color: #fff;
          background-color: #009cff;
        }
        .clear-btn {
          color: #262626;
          background-color: #fff;
          border: 1px solid #d9dce2;
        }
      }
    }
    .table-wrapper {
      flex: 1;
      overflow-y: auto;
    }
  }
}
</style>
